<template>
  <div class="video">
    <div class="videolist">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="地面区域" name="first">
          <ul class="list">
            <li v-for="(item,index) in uplist" :key='index' @click="getupvideourl(item,index)"  :class="{ 'active': upactiveindex == index }">
              <span>{{index+1}}</span><span>{{item.videoName}}</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="井下区域" name="second">
          <ul class="list">
            <li v-for="(item,index) in uplist" :key='index' @click="getupvideourl(item,index)"  :class="{ 'active': upactiveindex == index }">
              <span>{{index+1}}</span><span>{{item.videoName}}</span>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="videourl">
      <!-- <video-player
        class="video-player vjs-custom-skin"
        :playsinline="true"
        style="padding:9px 8px;box-sizing: border-box;"
        :options="qyUrl | videoOption"
      >
      </video-player> -->
			<video id="video" autoplay width="100%" height="98%" style="border:1px solid #53738f"></video>
    </div>
    <!-- <div class="policelist">
      <ul class="policemain">
        <li v-for="(item, index) in aiVideoKeyAreas.slice(0, 3)" :key="index">
          <el-image
            :src="getImgUrl(item.file)"
            :preview-src-list="srcList2"
            @click="getimgmax(item.file)"
            class="imglist"
          >
          </el-image>
          <div class="policetext">
            <h1>
              <span>报警时间：</span><span>{{ item.date }}</span>
            </h1>
            <h1>
              <span>报警位置：</span><span>{{ item.address }}</span>
            </h1>
            <h1>
              <span>报警类型：</span><span>{{ item.dictLabel }}</span>
            </h1>
            <h1>
              <span>处理时间：</span><span>{{ item.handleDate }}</span>
            </h1>
          </div>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { list ,listurl} from '@/api/video/sysVideoData.js'
import "../../../../public/adapter.min.js";
import "../../../../public/webrtcstreamer.js";
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'videojs-contrib-hls'
export default {
 // components: { videoPlayer},
  data() {
    return {
			webRtcServer: null,
      activeName: "first",
      aiVideoKeyAreas: [],
      srcList2:[],
      qyUrl: "",
      uplist:[],
      upactiveindex:'',
      name:{
        remark:'井上'
      },
      id:{
        id:""
      }
    };
  },
   filters: {
    videoOption(val) {
      return {
        live: false,
        // preload: 'auto',
        loop: true,
        autoplay: true,
        language: 'zh-CN',
        aspectRatio: '16:8',
        fluid: true,
        sources: [
          {
            src: val // url地址
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        flash: {
          hls: {
            withCredentials: false
          }
        }
      }
    }
  },
	beforeDestroy() {
	this.webRtcServer.disconnect()
	this.webRtcServer = null
},
mounted() {
 
},
  methods: {
    handleClick(tab) {
      if(tab.index=='0'){
         this.name.remark="井上"
      }else{
         this.name.remark="井下"
      }
      this.upactiveindex='0'
      this.getVideoList(this.name)
    },
    // getImgUrl(img) {
    //   return process.env.VUE_APP_BASE_API + "/profile/" + img;
    // },
    //  getimgmax(row) {
    //   this.srcList2 = []
    //   this.srcList2.push(process.env.VUE_APP_BASE_API + "/profile/"+row)
    // },
    getVideoList(name) {
      list(name).then(res => {
        if (res.code == 200) {
          this.uplist = res.data
          console.log(8888,this.uplist[0])
          this.getupvideourl( this.uplist[0],0)
        }
      })
    },
    getupvideourl(item,index){
      this.id.id=item.id
      this.upactiveindex = index
      listurl(this.id).then(res=>{
        if(res.code == 200){
        //  this.qyUrl = res.data.vurl
				  this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//116.63.63.131:8000')
					this.webRtcServer.connect(res.data.vurl)
          //console.log(5555,this.qyUrl)
        }
      })
    },
    // getdownvideourl(item,index){
    //   this.qyUrl=item.vurl
    //   this.downactiveindex = index
    // }
  },
  created () {
    this.getVideoList(this.name);
  },
};
</script>

<style lang="scss" scoped>
.video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../../../assets/images/back.png) no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
  .videolist {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    padding: 0 20px;
    .list{
      li{
        height: 30px;
        line-height: 30px;
        margin:5px 0;
        color: #fff;
        cursor: pointer;
        span:nth-child(1){
          display: inline-block;
          width:20px;
          height: 20px;
          border-radius: 50%;
          text-align: center;
          background: #5aa5a5;
          color: #fff;
          line-height: 20px;
          margin-right:20px;
        }
      }
    }
    .active{
      color: #5aa5a5 !important;
    }
  }
  .videourl {
    flex:1;
    margin: 0 20px;
  }
  // .policelist {
  //   flex: 1;
  //   height: 100%;
  //   .policemain {
  //     width: 100%;
  //     height: 100%;
  //     display: flex;
  //     flex-direction: column;
  //     li {
  //       flex: 1;
  //       margin-bottom: 10px;
  //       overflow: hidden;
  //       position: relative;
  //       background: url(../../../assets/img/border3.png) no-repeat;
  //       background-size: 100% 100%;
  //       .imglist {
  //         position: absolute;
  //         top: 0;
  //         bottom: 0;
  //         left: 0;
  //         right: 0;
  //         width:100%;
  //       }
  //       .policetext{
  //         position: absolute;
  //         left: 0;
  //         right: 0;
  //         bottom: 0;
  //         height: 100px;
  //         background: rgba(4, 0, 0, 0.639);
  //         color: #fff;
  //         z-index:20;
  //         h1{
  //           line-height: 0.25rem;
  //           font-size: 0.14rem;
  //           padding-left:0.15rem;
  //         }
  //       }
  //     }
  //     li:last-child {
  //       margin-bottom: 0;
  //     }
  //   }
  // }
}
</style>
<style>
.el-tabs__item {
  color: #fff;
  font-size: 18px;
}
.el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #3c4e6e;
  z-index: 1;
}
</style>
